<template>
  <div class="User">
    <div class="chaxun">
      <el-form :inline="true" :model="formInline" ref="seachFrom">
        <el-form-item label="下单人id" prop="orderUserId">
          <el-input v-model="formInline.orderUserId"></el-input>
        </el-form-item>
        <el-form-item label="订单编码" prop="orderCode">
          <el-input v-model="formInline.orderCode"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
          <el-select v-model="formInline.orderStatus">
            <el-option label="全部" value=""></el-option>
            <el-option label="已下单" value="0"></el-option>
            <el-option label="已发货" value="1"></el-option>
            <el-option label="未评价" value="2"></el-option>
            <el-option label="已评价" value="3"></el-option>
            <el-option label="已完成" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        border
        tooltip-effect="dark"
        height="450"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="orderUserId" label="下单人id" width="150" sortable></el-table-column>
        <el-table-column prop="orderCode" label="订单编码" width="180" sortable></el-table-column>
        <el-table-column prop="orderAmount" label="订单总金额" width="100" sortable></el-table-column>
        <el-table-column prop="statusName" label="订单状态" width="100" sortable></el-table-column>
        <el-table-column prop="payStatus" label="支付状态" width="100" sortable></el-table-column>
        <el-table-column prop="businessCode" label="商家编码" width="180" sortable></el-table-column>
        <el-table-column prop="orderUserName" label="下单人用户名" width="100" sortable></el-table-column>
        <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
        <el-table-column fixed="right" label="查看详情">
          <template slot-scope="scope">
            <el-button @click="findDetail(scope.row.orderCode)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,50,100, 200, 300, 400]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalnum"
      ></el-pagination>
    </div>


<el-dialog
      title="修改菜单"
      :visible.sync="dialogVisiblefind"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
      >
      <div>
        <el-table :data="tableDetailData">
          <el-table-column property="orderCode" label="订单编码" width="150"></el-table-column>
          <el-table-column property="skuCode" label="商品编码" width="180"></el-table-column>
          <el-table-column property="shopNum" label="购买数量" width="120"></el-table-column>
          <el-table-column property="skuSmount" label="总金额" width="120"></el-table-column>
          <el-table-column property="skuName" label="商品名称" width="180"></el-table-column>
          <el-table-column property="salePrice" label="售价" width="120"></el-table-column>
          <el-table-column property="costPrice" label="定价" width="120"></el-table-column>
       </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        orderUserId:"",
        orderCode:"",
        orderStatus:"",
        pagesize:"",
        pageNum:"",
      },
      dialogVisiblefind:false,
      tableData:[],
      tableDetailData:[],
      totalnum: 0,
      pagesize: 10,
      currentPage: 1,
    };
  },
  beforeMount() {
    this.getData();
  },
  methods: {
    getData() {
      this.formInline.pagesize=this.pagesize
      this.formInline.pageNum=this.currentPage
      this.$axios.post(this.$store.state.url+'/order/listOrders',this.formInline).then(res => {
          if (res.data.code == 1) {
            this.tableData=res.data.data.list
            this.totalnum=res.data.data.total
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //重置
    chongzhi(){
      this.$refs["seachFrom"].resetFields()
      this.pagesize= 10
      this.currentPage= 1
      this.getData()
    },
    //查询
    onSubmit() {
      this.getData()
    },
    //查看详情
    findDetail(val){
      this.dialogVisiblefind= true;
      this.$axios.get(this.$store.state.url+'/order/listOrderDetails?orderCode='+val).then(res => {
          if (res.data.code == 1) {
            this.tableDetailData=res.data.data
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    cancle(){
      this.dialogVisiblefind=false
    },
    handleSizeChange(val) {
      this.pagesize=val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage=val
      this.getData()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.biaoge {
  margin-top: 30px;
}
.block {
  float: right !important;
}
</style>

<style>
.user .el-input__inner{
    width: 150px
}
</style>

